<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/index.css">
</head>
<body>
  首页的布局

  <div class="nav">
    <ul class="list">
      <li>
        <span>家用电器</span>
        <i>/</i>
        <span>家用电器</span>
        <i>/</i>
        <span>家用电器</span>
      </li>
      <li>
        <span>家用电器</span>
      </li>
      <li>家用电器</li>
      <li>家用电器</li>
      <li>家用电器</li>
      <li>家用电器</li>
      <li>家用电器</li>
      <li>家用电器</li>
      <li>家用电器</li>
      <li>家用电器</li>
      <li>家用电器</li>
      <li>家用电器</li>
      <li>家用电器</li>
      <li>家用电器</li>
      <li>家用电器</li>
      <li>家用电器</li>
      <li>家用电器</li>
      <li>家用电器</li>
    </ul>
    <div class="content">
      <!-- <div class="left">
        <ul class="tags">
          <li>
            <span>家电馆</span>
            <i class="icon">&gt;</i>
          </li>
        </ul>
        <ul class="cate_list">
          <li>
            <div class="name">
              <span>分类名称</span>
              <i>&gt;</i>
            </div>
            <ol>
              <li>内容</li>
            </ol>
          </li>
        </ul>
      </div>
      <div class="right">
        <ul class="small_list">
          <li>
            <img src="" alt="">
          </li>
        </ul>
        <ul class="big_list">
          <li>
            <img src="" alt="">
          </li>
        </ul>
      </div> -->
    </div>
  </div>

  <script src="../js/jd_left_nav.js"></script>
  <script>
    const listBox = document.querySelector('.nav > .list')
    const contentBox = document.querySelector('.nav > .content')
    // 渲染页面
    bindHtml()
    function bindHtml() {
      // 利用 list 数组渲染页面
      let str = ''
      list.forEach(item => {
        str += `
          <li data-id="${ item.id }">
        `
        // item.name 是一个数组, 有多少项就有多少个 span
        item.name.forEach((t, i) => {
          str += `
            <span>${ t.title }</span>
            ${ i === item.name.length - 1 ? '' : '<i>/</i>' }
          `
        })

        str += `
          </li>
        `
      })
      listBox.innerHTML = str
    }

    // 绑定事件
    const lis = listBox.querySelectorAll('li')
    lis.forEach(function (item) {
      item.onmouseover = function () {
        // 从数组中找到对应的数据
        // 拿到自己身上自定义属性 id
        const id = item.dataset.id
        // 从数组中找到 id 对应的数据
        const data = list.find(item => item.id === id)
        bindRightHtml(data)

        // 使用 data 把右边的数据渲染完毕即可
        contentBox.classList.add('active')
      }
    })

    listBox.onmouseleave = function () {
      contentBox.classList.remove('active')
    }

    // 渲染右边的函数
    function bindRightHtml(data) {

      let str = `
        <div class="left">
          <ul class="tags">
      `

      data.tags.forEach(item => {
        str += `
          <li>
            <span>${ item.title }</span>
            <i class="icon">&gt;</i>
          </li>
        `
      })

      str += `
          </ul>
          <ul class="cate_list">
      `

      data.children.forEach(item => {
        str += `
          <li>
            <div class="name">
              <span>${ item.title }</span>
              <i>&gt;</i>
            </div>
            <ol>
        `

        item.children.forEach(t => {
          str += `
            <li>${ t.title }</li>
          `
        })

        str += `
            </ol>
          </li>
        `
      })

      str += `
          </ul>
        </div>
        <div class="right">
          <ul class="small_list">
      `

      data.smallPics.slice(0, 8).forEach(item => {
        str += `
          <li>
            <img src="${ item.url }" alt="">
          </li>
        `
      })

      str += `
          </ul>
          <ul class="big_list">
      `

      data.bigPics.slice(0, 2).forEach(item => {
        str += `
          <li>
            <img src="${ item.url }" alt="">
          </li>
        `
      })

      str += `
          </ul>
        </div>
      `

      contentBox.innerHTML = str
    }
  </script>
</body>
</html>
